<!--
 * @Description:
 * @Author bianpengfei
 * @create 2022/2/22 21:45
 -->
<template>
  <div class="!p-[12px] m-[auto] bg-[#fff] h-full">
    <g-title type="danger" class="my-[12px]">这是标题</g-title>
    <g-title dark class="my-[12px]"
      >这是标题：主导航置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器
      影响。根据尼尔森 F
      视觉模型，属于较为经典的页面布局形式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不
      适合一级导航项很多的信息结构，多用于数据展示类产品。
    </g-title>
    <g-title type="error" class="my-[12px]">这是标题</g-title>
    <g-title dark type="error" class="my-[12px]"
      >这是标题：主导航置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器
      影响。根据尼尔森 F
      视觉模型，属于较为经典的页面布局形式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不
      适合一级导航项很多的信息结构，多用于数据展示类产品。
    </g-title>
    <g-title type="warning" class="my-[12px]">这是标题</g-title>
    <g-title dark type="warning" class="my-[12px]"
      >这是标题：主导航置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器
      影响。根据尼尔森 F
      视觉模型，属于较为经典的页面布局形式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不
      适合一级导航项很多的信息结构，多用于数据展示类产品。
    </g-title>

    <g-title type="success" class="my-[12px]">这是标题</g-title>
    <g-title dark type="success" class="my-[12px]"
      >这是标题：主导航置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器
      影响。根据尼尔森 F
      视觉模型，属于较为经典的页面布局形式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不
      适合一级导航项很多的信息结构，多用于数据展示类产品。
    </g-title>
  </div>
</template>

<script>
export default {
  name: 'Index'
}
</script>

<style scoped></style>
